<template>
	<div>
		<Form :label-width="80">
			<FormItem label="部门名称">
				<Input type="text" v-model="deptName" v-bind:readonly="true"></Input>
			</FormItem>
			<FormItem label="职位名称">
				<Input v-model="job.name" placeholder="请输入职位"></Input>
			</FormItem>
			<Alert closable v-show="pJobShow.pJob1">当前部门没有父级职位，该职位为父级职位!</Alert>
			<FormItem label="父级权限" v-show="pJobShow.pJob2">
				<div v-for="(step, index) in steps" :key="index">
					<Select @on-change="changePJob(index)" v-model="step.selectedJobId" >
						<Option v-for="job in filteredJobs(step.pJobId)" :value="job.jobId" :key="job.jobId">
							{{ job.name }}
						</Option>
					</Select>
				</div>
			</FormItem>
			<FormItem class="text-right">
				<Button @click="submit" type="primary">提交</Button>
			</FormItem>
		</Form>
	</div>
</template>
<script>
	export default {
		props: {
			params: {
				type: Object,
				default: undefined,
			}
		},
		data() {
			return {
				pJobShow: {
					pJob1: false,
					pJob2: false,
				},
				steps: [{
					pJobId: 0,
					selectedJobId: undefined
				}],
				jobs: [],
				pJobId:[],
				deptName: "",
				job: {
					deptId: "",
					name: "",
					pJobId: "",
				},
			}
		},

		created: function() {
			this.job.deptId = this.params.deptId;
			this.deptName = this.params.deptName;
			this.http.get({
				url: "/dept/job/all",
				param: {
					deptId: this.job.deptId
				}
			}).then(data => {
				if (0 == data.length) {
					this.pJobShow.pJob1 = true;
					return;
				};
				this.pJobShow.pJob2 = true;
				this.jobs = data;
				for (var i = 0; i < this.jobs.length; i++) {
					this.pJobId.push(this.jobs[i].pJobId);  
				}
			});
		},
		computed: {
			filteredJobs() {
				return (pJobId) => {
					if (!pJobId) {
						const parsedNumbers = this.pJobId.map(Number);
						return this.jobs.filter((job) => job.pJobId == Math.min(...parsedNumbers));
					} else {
						return this.jobs.filter((job) => job.pJobId == pJobId);
					}
				};
			}
		},
		methods: {
			changePJob(index) {
				var lastStep = this.steps[index];
				var pJobId = lastStep.selectedJobId;
				this.steps.splice(index + 1); // 移除所有当前索引之后的步骤
				if (pJobId) {
					this.steps.push({
						pJobId,
						selectedJobId: undefined
					});
				}
			},
			submit: function() {
				var lastDropdown = this.steps[this.steps.length - 1];
				var pJobIds = lastDropdown.pJobId;
				this.job.pJobId = pJobIds;
				if (this.job.name == "") {
					this.message.error("请输职位名称");
					return;
				}
				console.log(this.job)
				if(this.pJobShow.pJob1 == true){
					this.http.post({
						url: "/dept/job/info",
						param: {
							deptId: this.job.deptId,
							name: this.job.name,
							pJobId: 1
						}
					}).then(data => {
						this.message.info("添加成功");
						this.$router.detail.close();
					});
					return;
				}
				if (this.job.pJobId == "") {
					this.message.error("请选择父级职位");
					return;
				}
				this.http.post({
					url: "/dept/job/info",
					param: {
						deptId: this.job.deptId,
						name: this.job.name,
						pJobId: this.job.pJobId
					}
				}).then(data => {
					this.message.info("添加成功");
					this.$router.detail.close();
				});
			},
		},
	}
</script>

<style>
</style>
